<script setup>
import {ref} from "vue";

const vnode = ref({
  type: 'QCard',
  props: {
    style: {width: '500px', height: '500px', overflow: 'auto'}
  },
  children: [
    {type: 'QCardSection', props: {class: {'drag-root': true}, style: {overflow: 'auto'}}, children: [
        {type: 'QBtn', props: {label: '按钮1', color: 'primary', style: {width: '100%'}}},
        {type: 'QBtn', props: {label: '按钮2', color: 'primary', style: {width: '100%'}}},
        {type: 'QBtn', props: {label: '按钮3', color: 'primary', style: {width: '100%'}}},
        {type: 'QBtn', props: {label: '按钮4', color: 'primary', style: {width: '100%'}}},
        {type: 'QBtn', props: {label: '按钮5', color: 'primary', style: {width: '100%'}}},
        {type: 'QBtn', props: {label: '按钮6', color: 'primary', style: {width: '100%'}}},
        {type: 'QBtn', props: {label: '按钮8', color: 'primary', style: {width: '100%'}}},
        {type: 'QBtn', props: {label: '按钮9', color: 'primary', style: {width: '100%'}}},
        {type: 'QBtn', props: {label: '按钮10', color: 'primary', style: {width: '100%'}}},
        {type: 'QBtn', props: {label: '按钮11', color: 'primary', style: {width: '100%'}}},
        {type: 'QBtn', props: {label: '按钮12', color: 'primary', style: {width: '100%'}}},
        {type: 'QBtn', props: {label: '按钮13', color: 'primary', style: {width: '100%'}}},
        {type: 'QBtn', props: {label: '按钮14', color: 'primary', style: {width: '100%'}}},
        {type: 'QBtn', props: {label: '按钮15', color: 'primary', style: {width: '100%'}}},
        {type: 'QBtn', props: {label: '按钮16', color: 'primary', style: {width: '100%'}}},
        {type: 'QBtn', props: {label: '按钮16', color: 'primary', style: {width: '100%'}}},
        {type: 'QBtn', props: {label: '按钮16', color: 'primary', style: {width: '100%'}}},
        {type: 'QBtn', props: {label: '按钮16', color: 'primary', style: {width: '100%'}}},
        {type: 'QBtn', props: {label: '按钮16', color: 'primary', style: {width: '100%'}}},
        {type: 'QBtn', props: {label: '按钮16', color: 'primary', style: {width: '100%'}}},
      ]},
  ]
})

const tabs = ref([
  {label: '项目', value: 'project'},
  {label: '模板库', value: 'usage'},
  {label: '属性', value: 'props'},
  {label: '事件', value: 'event'},
  {label: '样式', value: 'style'},
  {label: '标签库', value: 'tag'},
  {label: '图层', value: 'layer'},
])

const renderByJson = ref()
const currentNode = ref()
function setNode(node) {
  currentNode.value = node
}

function logData() {
  console.log(renderByJson.value.allScope.value.dataScope)
}

const formData = ref({name: 'lin'})
const currentLeftTab = ref('props')

const editArea = ref()
</script>

<template>
  <div class="grid">
    <div class="header"></div>
    <div class="center">
      <div class="center-left fit">
        <SliderTabLayout :tabs="tabs" default-value="usage">
          <template #project></template>
          <template #usage><UsageArea></UsageArea></template>
          <template #props><PropsArea v-if="currentNode" :currentNode="currentNode" :dataScope="currentNode.props"></PropsArea></template>
          <template #event><EventArea v-if="currentNode" :currentNode="currentNode" :dataScope="currentNode.props"></EventArea></template>
          <template #style><StyleArea v-if="currentNode" :currentNode="currentNode" :dataScope="currentNode.props"></StyleArea></template>
          <template #layer><LayerArea :vnode="vnode"></LayerArea></template>
          <template #tag><TagArea :vnode="vnode"></TagArea></template>
        </SliderTabLayout>
      </div>
      <EditorArea flat square bordered ref="editArea" @changePermLevel="console.log('9');console.log(editArea.getPermLevel())" :vnode="vnode" @changeSelectNode="setNode" :data-scope="formData"></EditorArea>
    </div>
    <div class="footer"></div>
  </div>
</template>

<style scoped lang="scss">
.grid {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: 25px 1fr 25px;
}

.header {
  border-bottom: 1px solid #e5e5e5;
}
.center {
  height: 100%;
  width: 100%;
  position: relative;
  display: grid;
  grid-template-columns: 400px 1fr;
}
//.center-left {
//  width: 340px;
//  height: 100%;
//  position: absolute;
//  left: 0;
//  top: 0;
//  z-index: 2;
//}
//.center-right {
//  width: 450px;
//  height: 100%;
//  position: absolute;
//  right: 0;
//  top: 0;
//  z-index: 2;
//}
.footer {
  border-top: 1px solid #e5e5e5;
}
</style>
